.slide-right-enter-from {
  /* 初始状态：在左侧完全隐藏 */
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter-active {
  /* 动画过程：定义过渡效果 */
  transition: all 0.2s ease-out;
}

.slide-right-enter-to {
  /* 结束状态：移动到正常位置 */
  transform: translateX(0);
  opacity: 1;
}

/* 可选：添加滑出动画 */
.slide-right-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.slide-right-leave-active {
  transition: all 0.2s ease-in;
}

.slide-right-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}


/* 动画效果定义 */
.scale-center-enter-active,
.scale-center-leave-active {
  transition: all 0.3s ease;
}

/* 进入前的初始状态 */
.scale-center-enter-from {
  opacity: 0;
  transform: scale(0);
}

/* 离开后的最终状态 */
.scale-center-leave-to {
  opacity: 0;
  transform: scale(0);
}


/* 从上到下滚动展开动画 */
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.1s ease-out;
}

/* 进入前的状态：高度为0，完全隐藏在顶部 */
.slide-down-enter-from {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  overflow: hidden;
}

/* 进入后的状态：高度自适应内容，完全显示 */
.slide-down-enter-to {
  max-height: 500px; /* 大于内容实际高度的值 */
  opacity: 1;
  transform: translateY(0);
}

/* 离开前的状态：保持显示状态 */
.slide-down-leave-from {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

/* 离开后的状态：高度收缩为0，隐藏 */
.slide-down-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  overflow: hidden;
}

    /* 动画效果 */
        .expand-pop-enter-active {
            transition: all 0.5s ease-out;
        }
        
        .expand-pop-leave-active {
            transition: all 0.4s ease-in;
        }
        
        .expand-pop-enter-from {
            opacity: 0;
            transform: scale(0) translate(100%, -100%);
            transform-origin: top right;
        }
        
        .expand-pop-leave-to {
            opacity: 0;
            transform: scale(0) translate(100%, -100%);
            transform-origin: bottom left;
        }